<template>

  <view class="content">
    <view class="fix" id="demo">
      <view class="navbar">
        <!-- logo文字 -->
        <view class="logo">
          <image class="logo-image" src="@/static/logo.png"></image>
          <text class="logo-by">By</text>
          <text class="logo-text">天津机电职业技术学院</text>
          <u-icon name="bell" color="#13D069" size="50rpx" @click="goToMessage()"></u-icon>
        </view>
        <!-- 搜索条  url="/pages/serach/serach"-->
        <navigator  class="search">
          <u-input
              placeholder="搜索你感兴趣的内容/社区/活动"
              border="none"
              prefixIcon="search"
			  @confirm="goToSearch()"
              prefixIconStyle="font-size: 22px;color: #909399" fontSize="12"
          >
            <template slot="suffix" >
              <u-icon name="scan" color="#b6b6b6" size="25" @click="scanCode()"></u-icon>
            </template>
          </u-input>
        </navigator>
      </view>
    </view>
    <view class="card">
      <view class="card-left">
        <view class="card-left-text">
          <text class="card-left-text-top">3D 数字校园</text>
          <view class="card-left-text-bottom">
            <text>校园导航 / 活动打卡</text>
          </view>

        </view>
      </view>
      <view class="card-right">
        <view class="card-right-top">
          <view class="card-right-top-text">
            <text class="card-right-top-text-top">电子校园卡</text>
            <view class="card-right-top-text-bottom">
              <text>充值 / 明细</text>
            </view>
          </view>
        </view>
        <view class="card-right-bottom">
          <view class="card-right-bottom-text">
            <text class="card-right-bottom-text-top">我的资产</text>
            <view class="card-right-bottom-text-bottom">
              <text>经验 / 奖励</text>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view class="notice">
      <view class="notice-top">
        <view style="margin-left: 10rpx;">
          <u-icon name="bell" color="#60CC74" size="20"></u-icon>
        </view>
        <view class="notice-top-center">
          <text style="color: #3D3D3D;font-size: 24rpx;"> 官方通知 | 新同学欢迎进入新苗同学！</text>
        </view>
        <view class="notice-top-right">
          <text style="font-size: 12px;color: #13D069" @click="goToPer()">立即查看 > </text>
        </view>
      </view>
      <view class="notice-bottom">
        <view class="notcie-bottom-left">
          <view class="notcie-bottom-left-text">
            <text class="notcie-bottom-left-text-top">你还有<text
                style="color: red;">10条</text>任务没有完成</text>
            <view class="notcie-bottom-left-text-bottom">
              <text>请尽快前去查看!</text>
              <text
				  @click="goToTask()"
                  style="
								width: 100rpx;
								height: 24rpx;
								margin-left:40rpx;
								padding:5rpx 5rpx ;
								color:#13D069;
								font-size: 24rpx;
								font-weight:700;
								border-radius: 24rpx;"
              >GO! ></text>
            </view>
          </view>
        </view>
        <view class="notice-bottom-right">
          <image class="icon2"
                 src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/nav_icon_1.png"></image>
          <image class="icon" src="../../static/4.png">

          </image>




        </view>
      </view>
    </view>
    <view class="category">
      <navigator class="category-item" hover-class="none" url="/pages/index/index" v-for="item in dd" :key="item">
        <image class="icon" :src="item.src"></image>
        <text class="text">{{item.name}}</text>
      </navigator>
    </view>

    <view class="hot" style="margin-top: 20px;">
      <view class="title">
        <view class="title-text">
          <text class="title-text-son">热门活动</text>
        </view>
        <text class="title-desc">查看所有></text>
      </view>
      <view class="item" style="margin-top: 20rpx;">
        <view class="cards">
          <div v-for="item in 3" :key="item.id" class="image">
            <image class="icon" src="../../static/1.jpg"></image>
            <text style="font-size: 24rpx;">ui进度加载提示器</text>
          </div>
        </view>
      </view>

    </view>

    <view>
      <image class="gg" src="/static/2.jpg" mode=""></image>
    </view>

    <view class="hot2" style="margin-bottom: 20px;">
      <view class="title">
        <text class="title-text">
          <text class="title-text-son">精选活动</text>
        </text>
        <text class="title-desc">查看所有></text>
      </view>
      <view class="item">
        <view class="cards">
          <div v-for="item in 3" :key="index" class="image">
            <image class="icon" src="/static/3.jpg"></image>
            <view class="text">
              <view style="height: 40rpx;display: flex;justify-content: space-around; ">
                <view style="flex: 1;">
                  <text style="width: 168rpx;color:#3D3D3D ; font-size: 28rpx;">这是任务名称</text>
                  <text style="font-size: 20rpx;margin-left: 10rpx;font-size: 17rpx;">校园官方</text>
                </view>

                <text style="flex: 1;text-align: right;">文字</text>
              </view>
              <view style="width: 540rpx;height: 84rpx; background-color: aliceblue;margin-top: 21rpx;">
              </view>
              <view style="height: 32rpx;display: flex;margin-top: 22rpx;">
                <view style="flex: 1; display: flex;">
                  <text
                      style="width: 90rpx;font-size: 21rpx;font-weight: 900; color:#13D069 ;">完成奖励</text>
                  <view style="flex: 1; display: flex;justify-content: flex-start;" v-for="item in 2"
                        :key="item.id">
                    <u-icon name="scan" color="#b6b6b6" size="28rpx"></u-icon>
                    <text style="font-size: 20rpx;">100</text>
                  </view>
                </view>
                <view style="flex: 1;text-align: right;display: flex;justify-content: flex-end;">
                  <view style="width: 150rpx;">
                    <u-button
                        type="success"
                        :custom-style="an1"
                        text="立即报名"
                        shape="circle"
                    ></u-button>
                  </view>
                </view>
              </view>
            </view>
          </div>
        </view>
      </view>

    </view>

  </view>

</template>

<script>
export default {

  data() {
    //获取屏幕边界的安全距离
    const {
      safeAreaInsets
    } = uni.getSystemInfoSync()



    return {
      title1: '欢迎新同学',
      content: '123',
      safeAreaInsets,
      listTop: 0,
      query2: 0,
      an1: {
        width: '150rpx',
        height: '32rpx'
      },
      an2: {
        with: '114rpx',
        height: '34rpx',
        color: "#13D069"
      },
      dd: [{
        src: require("../../static/d1.png"),
        name: "任务管理"
      },
        {
          src: require("../../static/d2.png"),
          name: "活动管理"
        },
        {
          src: require("../../static/d3.png"),
          name: "热门榜单"
        },
        {
          src: require("../../static/d4.png"),
          name: "校园打卡"
        },
        {
          src: require("../../static/d5.png"),
          name: "我的社区"
        },
      ],
      ceshi: 0,
      isSh: false,
      show: false,
      title: '标题',
      content: 'uView的目标是成为uni-app生态最优秀的UI框架'
    }
  },
  onPageScroll(res) {
    this.ceshi = res.scrollTop
    if (this.ceshi > this.query2) {
      this.isSh = true
    }
    if (this.ceshi <= this.query2) {
      this.isSh = false
    }
  },
  onLoad: function(opt) {

  },
  onReady() {
    this.qury()

  },
  
  methods: {
    confirm1() {
      this.show = false
      uni.navigateTo({
        url: '/pages/Personal/Personal'
      });
    },
    cancel() {
      this.show = false
      console.log('cancel');
    },
    close() {
      this.show = false
      console.log('close');
    },
    showModal() {
      this.show = true;
    },
    confirm() {
      setTimeout(() => {
        // 3秒后自动关闭
        this.show = false;
      }, 3000)
    },
	goToMessage(){
	  uni.navigateTo({
		url:'/pages/index/MessageCenter'
	  })
	},
	goToTask(){
		uni.navigateTo({
			url: '/pages/index/ManagerTask'
		})
	},
	goToPer(){
		uni.navigateTo({
			url: '/pages/index/Personal'
		})
	},
	goToSearch(){
		uni.navigateTo({
			url: '/pages/index/serach'
		})
	},
    qury() {
      let query1 = uni.createSelectorQuery().in(this);
      query1.select('#demo1').boundingClientRect(data => {
        this.query2 = data.top
        console.log(this.query2);
      }).exec();
    },
    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码成功', res)
        },
        fail: (err) => {
          console.log('扫码失败', err)
        },
        complete: () => {
          console.log('扫码结束')
        }
      })
    },
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

.top {

  &-left {

    top: -100px;
    left: -90px;
    width: 500rpx;
    height: 500rpx;
    // background-color: skyblue;
    background: linear-gradient(to right bottom, #BBEEF4, #FFFFFF);
    filter: blur(10px);
    border-radius: 50%;
    z-index: -22;
  }

  &-right {

    top: -110px;
    right: -110px;
    width: 600rpx;
    height: 600rpx;
    // background-color: skyblue;
    background: linear-gradient(to left bottom, #A9EDC8, #FFFFFF);
    filter: blur(10px);
    border-radius: 50%;
    z-index: -1;
  }
}

.gg {
  width: 100%;
  height: 180rpx;
  border-radius: 16rpx;
}

.fix {
  position: sticky;
  top: 0px;
  left: 0px;
  width: 100%;
  background: white;
  z-index: 100;
}

.content {
  margin: 0 20rpx;
  padding: 0;

}

.hot {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10rpx;
  background-color: #fff;
  margin-top: 30rpx;

  .title {
    width: 100%;

    .title-text {
      float: left;
      font-size:28rpx;
      font-weight: 800;
      color: #3D3D3D;
      border-radius: 20%;
      background-color: #C5FADD;
      position: absolute;

      &-son {
        position: relative;
        top: -10rpx;
        left: 10rpx;
      }

    }

    .title-desc {
      float: right;
      font-size: 21rpx;
      color: #7f7f7f;
    }
  }

  .item {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 216rpx;

    .image {

      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: left;
      box-sizing: border-box;
      flex: 1;
      margin-right: 12rpx;

      .icon {
        width: 100%;
        height: 150rpx;
        border-radius: 16rpx 16rpx 16rpx 0px;
      }

      .text {
        margin-top: 3rpx;
        font-size: 24rpx;
        text-align: left;
        color: #333333;
      }
    }

  }

  .cards {
    display: flex;
    width: 100%;
  }
}

.hot2 {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10rpx;
  background-color: #fff;
  margin-top: 30rpx;
  margin-bottom: 30px;

  .title {
    width: 100%;

    .title-text {
      float: left;
      font-size: 28rpx;
      font-weight: 800;
      color: #3D3D3D;
      border-radius: 20%;
      background-color: #C5FADD;
      position: absolute;

      &-son {
        position: relative;
        top: -10rpx;
        left: 10rpx;
      }
    }

    .title-desc {
      float: right;
      font-size: 24rpx;
      color: #7f7f7f;
    }
  }

  .item {
    margin-top: 10rpx;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 195rpx;

    .image {
      margin-top: 18rpx;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;



      .icon {
        border-radius: 7rpx;
        width: 162rpx;
        height: 195rpx;
      }

      .text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        height: 100%;
        margin-left: 26rpx;
      }
    }

  }

  .cards {
    display: flex;
    width: 100%;
    flex-direction: column;

  }
}

.category {
  display: flex;
  flex-wrap: wrap;
  margin-top: 36rpx;

  .category-item {
    width: 20%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;

    .icon {

      width: 50rpx;
      height: 50rpx;
    }

    .text {
      margin-top: 16rpx;
      font-size: 20rpx;
      color: #3D3D3D;
    }
  }
}

.notice {
  display: flex;
  flex-direction: column;
  height: 200rpx;
  border-radius: 16rpx;
  background-color: #C5FADD;

  .notice-top {

    height: 57rpx;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    &-center {

      flex: 1;
      font-size: 21rpx;

    }

    &-right {
      width: 114rpx;
      margin-right: 24rpx;
    }
  }

  .notice-bottom {
    flex: 1;
    border: 1px solid lightgreen;
    border-radius: 16rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .notcie-bottom-left {

    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 16rpx 0 0 16rpx;

    &-text {

      &-top {
        font-family: Source Han Sans;
        font-size: 28rpx;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;
        color: #333333;
      }

      &-bottom {
        margin-top: 12rpx;
        font-size: 20rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
        color: #999999;
      }

    }
  }

  .notice-bottom-right {
    flex: 1;

    .icon {
      width: 100%;
      height: 100%;
      position: relative;

    }

    .icon2 {
      width: 85rpx;
      height: 85rpx;
      position: absolute;
      z-index: 2;
      margin: 50rpx 50rpx 50rpx 220rpx;

    }
  }
}

.card {
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  height: 228rpx;
  margin-bottom: 21rpx;

  .card-left {

    flex: 1;
    background-color: #13D069;
    color: white;
    border-radius: 16rpx;

    .card-left-text {
      margin-left: 34rpx;
      margin-top: 32rpx;

      &-top {
        font-size: 32rpx;
        font-weight: bold;
        font-family: Source Han Sans;
      }

      &-bottom {
        font-family: Source Han Sans;
        font-size: 20rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
      }
    }

  }

  .card-right {
    margin-left: 18rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;
  }

  .card-right-top {
    width: 100%;
    flex: 1;
    border-radius: 16rpx;
    background-color: #5A9BF9;
    color: white;

    .card-right-top-text {

      margin-left: 36rpx;
      margin-top: 20rpx;

      &-top {
        font-size: 32rpx;
        font-weight: bold;
        font-family: Source Han Sans;
      }

      &-bottom {
        font-family: Source Han Sans;
        font-size: 20rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
      }

    }
  }

  .card-right-bottom {
    margin-top: 20rpx;
    width: 100%;
    flex: 1;
    border-radius: 16rpx;
    background-color: #F3B143;
    color: white;

    .card-right-bottom-text {

      margin-left: 36rpx;
      margin-top: 20rpx;

      &-top {
        font-size: 32rpx;
        font-weight: bold;
        font-family: Source Han Sans;
      }

      &-bottom {
        font-family: Source Han Sans;
        font-size: 20rpx;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0em;
      }


    }
  }
}

.navbar {
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 80rpx;

  .logo {
    display: flex;
    align-items: center;
    height: 64rpx;

    padding-top: 20rpx;

    .logo-image {
      width: 220rpx;
      height: 60rpx;
    }

    .logo-by {
      color: #13D069;
      font-size: 28rpx;
    }

    .logo-text {
      flex: 1;
      line-height: 10rpx;
      color: #3D3D3D;
      margin: 2rpx 0 0 20rpx;
      padding-left: 1rpx;
      font-size: 28rpx;
    }
  }

  .search {
    border: 1.5px solid #13D069;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8.5rpx 0 22rpx;
    height: 60rpx;
    margin: 22rpx 0;
    color: #999999;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: rgba(255, 255, 255, 0.6);
  }

  .icon-search {
    &::before {
      margin-right: 8.5rpx;
    }
  }

  .icon-scan {
    font-size: 20rpx;
    padding: 15rpx;
  }
}

.top {
  &-left {
    position: fixed;
    top: -100px;
    left: -90px;
    width: 500rpx;
    height: 500rpx;
    // background-color: skyblue;
    background: linear-gradient(to right bottom, #BBEEF4, #FFFFFF);
    filter: blur(10px);
    border-radius: 50%;

  }

  &-right {
    position: fixed;
    top: -110px;
    right: -110px;
    width: 600rpx;
    height: 600rpx;
    // background-color: skyblue;
    background: linear-gradient(to left bottom, #A9EDC8, #FFFFFF);
    filter: blur(10px);
    border-radius: 50%;
  }
}

.box {
  margin: 10rpx 60rpx;
  margin-top: 320rpx;

  &-top {
    &>view:nth-child(1) {
      font-family: Alibaba PuHuiTi 2.0;
      font-size: 40rpx;
    }

    &>view:nth-child(2) {
      font-family: Alibaba PuHuiTi 2.0;
      font-size: 24rpx;
      margin-top: 20rpx;
      color: #989898;
    }
  }

  &-center {
    margin-top: 120rpx;
  }

  .margin {
    &-left {
      font-family: Alibaba PuHuiTi 2.0;
      font-size: 24rpx;
      color: #989898;
      margin-left: 10rpx;
    }

    &-right {
      font-family: Alibaba PuHuiTi 2.0;
      font-size: 24rpx;
      color: #13D069;
      margin-right: 10rpx;
    }
  }

  &-bottom {
    margin-top: 90rpx;

    &>button {
      color: #fff;
      background: #13D069;
      border-radius: 70rpx;
      height: 70rpx;
      font-size: 24rpx;
    }

    &-text {

      margin-top: 35rpx;

      &>image {
        width: 30rpx;
        height: 30rpx;
      }

      &>view {
        font-family: Alibaba PuHuiTi 2.0;
        font-size: 20rpx;
        margin-left: 10rpx;
        color: #989898;
      }
    }
  }

  &-ima {
    margin: 190rpx 0;

    &>image {
      width: 330rpx;
      height: 96rpx;
    }
  }
}
</style>
